import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { DETAIL, RELATED, ADD, GOODSSCOUNT } from '../../axios';
import Swiper2 from './Swiper2';
import { Passed, Stop, ArrowLeft, ShareO, CartO, Star  } from '@react-vant/icons'
import { Divider, ShareSheet, ActionBar  } from 'react-vant';
import './detail.css'
export default function Detail() {
    const navigate = useNavigate()
    const [visible, setVisible] = useState(false)
    let { id } = useParams()
    const [ gallery,setGallery ] = useState([])
    const [ info,setInfo ] = useState({})
    const [ attribute,setAttribute] = useState([])
    const [ issue,setIssue] = useState([])
    const [ goodsList,setGoodsList] = useState([])
    const [ productList,setProductList] = useState({})
    const [ goods_desc,setGoods_desc] = useState('')
    const [ goodsCount ,setGoodsCount ] = useState(0)
    useEffect(() => {
        DETAIL(id).then(res => {
            console.log(res);
            setGallery(res.data.data.gallery)
            setInfo(res.data.data.info)
            setGoods_desc(res.data.data.info.goods_desc)
            setAttribute(res.data.data.attribute)
            setIssue(res.data.data.issue)
            setProductList(res.data.data.productList[0])
        })
        RELATED(id).then(res => {
            // console.log(res);
            setGoodsList(res.data.data.goodsList)
        })
        getGOOD()
    },[])
    // console.log(JSON.stringify(goods_desc));
    // let images = document.
    const options = [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ]

    const getGOOD = () => {
        GOODSSCOUNT().then(res => {
            console.log(res);
            setGoodsCount(res.data.data.cartTotal.goodsCount)
        })
    }

    const add = () => {
        // console.log(productList);
        ADD({goodsId:productList.goods_id,productId:productList.id,number:1}).then(res => {
            console.log(res);
            getGOOD()
        })
    }
  return (
    <div>
        <div className='goback' onClick={() => navigate(-1)}>
            <ArrowLeft color='#fff' fontSize={'30px'} />
        </div>
        <div className='fenxiang' onClick={() => setVisible(true)}>
            <ShareO color='#fff' fontSize={'30px'} />
        </div>

        {/* <ShareSheet
            visible={visible}
            options={options}
            title='立即分享给好友'
            onCancel={() => setVisible(false)}
            onSelect={() => setVisible(false)}
            
        /> */}

        {gallery.length > 0 && <Swiper2 banner={gallery}></Swiper2>}
        <div className='detail-top'>
            <div>
            <Passed color='#f00'  />
            <span>30天无忧退货</span>
            </div>
            <div>
            <Passed color='#f00'  />
            <span>48小时快速退费</span>
            </div>
            <div>
            <Passed color='#f00'  />
            <span>满88元免邮费</span>
            </div>
        </div>

        {gallery.length > 0 && <div className='detail-topx'>
            <div className='detail-topx-tit'>{info.name}</div>
            <div className='detail-topx-text'>{info.goods_brief}</div>
            <div className='detail-topx-price'>￥ {info.retail_price}.00元</div>
        </div>}

        {gallery.length > 0 && <div className='canshu-box'>
            <p>商品参数</p>
            <ul className='canshu-ul'>
                {
                    attribute.map(item => {
                        return <li key={item.value} className='canshu'>
                            <div className='canshu-name'>{item.name}</div>
                            <div className='canshu-value'>{item.value}</div>
                        </li>
                    })
                }
            </ul>    
        </div>}

        {gallery.length > 0 && <div className='images-box'>
        <Divider className='fg'>产品详情</Divider>
        <div className='images' dangerouslySetInnerHTML={{__html: goods_desc}} /></div>}
       
        {gallery.length > 0 && <div>
            <Divider className='fg'>常见问题</Divider>
            <ul className='wenti'>
            {
                issue.map(item => {
                    return <li key={item.id}>
                        <Stop color='#f00' /><b>{item.question}</b>
                        <p>{item.answer}</p>
                    </li>
                })
            }
            </ul>
        </div>}

        {goodsList.length > 0 && <div className='tuijian-box'>
            <Divider className='fg'>相关推荐</Divider>
            <ul className='tuijian'>
                {
                    goodsList.map(item => {
                        return <li key={item.id}>
                            <img src={item.list_pic_url} alt="" />
                            <p className='tuijian-name'>{item.name}</p>
                            <p className='tuijian-price'>人民币{item.retail_price}.00元</p>
                        </li>
                    })
                }
            </ul>
        </div>}


        <ActionBar>
            <ActionBar.Icon icon={<Star color='red' />} text='店铺' />
            <ActionBar.Icon icon={<CartO color='red' />} badge={{ content: goodsCount }} text='购物车' onClick={() => navigate('/car')} />
            <ActionBar.Button type='warning' text='加入购物车' onClick={add} />
            <ActionBar.Button type='danger' text='立即购买' />
      </ActionBar>


    </div>
  )
}
